<template>
  <view class="ver-layout">
    <u-tabs class="tab-list-layout" :list="tabList" :is-scroll="false" :active-item-style="activeStyle"
            active-color="#42B4AB" inactive-color="#999999" :current="currentTab" @change="change"></u-tabs>
    <date-select v-model="currentDay"></date-select>
    <view class="amount-layout hor-layout-center">
      <view v-for="(item,index) in amountTypeList" :key="index" class="amount-item ver-layout-center">
        <view class="amount-item-num">
          <span>{{ item.value }}</span>
          <span class="amount-item-num-unit">元</span>
        </view>
        <view class="amount-item-text">{{ item.label }}</view>
      </view>
    </view>
    <view class="divider-line"></view>
    <!--  按科目报表  -->
    <view class="major-statistics-layout">
      <view class="statistics-layout-title">按科目</view>
      <view class="statistics-charts">
        <qiun-data-charts type="bar" :opts="chartOpts" :chartData="chartData"/>
      </view>
      <view class="tab-buttons hor-layout">
        <view class="button-left" :class="{'selected':selButton===0}" @click="changeButton(0)">实收金额</view>
        <view class="button-center" :class="{'selected':selButton===1}" @click="changeButton(1)">实退金额</view>
        <view class="button-right" :class="{'selected':selButton===2}" @click="changeButton(2)">收费合计</view>
      </view>
    </view>
    <!-- 按月统计   -->
    <view class="statistics-month-title">按月统计</view>
    <view class="month-statistics-layout">
      <!--  标题栏    -->
      <view class="month-statistics-title hor-layout-side-center">
        <view></view>
        <view>
          2021年
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="statistics-charts">
        <qiun-data-charts type="column" :opts="chartOptsColumn" :chartData="chartDataColumn"/>
      </view>
      <view class="tab-buttons hor-layout">
        <view class="button-left" :class="{'selected':selButtonColumn===0}" @click="changeButtonColumn(0)">实收金额</view>
        <view class="button-center" :class="{'selected':selButtonColumn===1}" @click="changeButtonColumn(1)">实退金额</view>
        <view class="button-right" :class="{'selected':selButtonColumn===2}" @click="changeButtonColumn(2)">收费合计</view>
      </view>
    </view>
    <view style="height: 30px"></view>
  </view>
</template>

<script>
import DateSelect from "@/components/date-select/date-select"
import {StatisticsListApi} from "@/api/statistics.js"
import dayjs from "dayjs";

let engine = new StatisticsListApi()
export default {
  name: "orderStatistics",
  components: {
    DateSelect
  },
  data() {
    return {
      activeStyle: {
        color: '#42B4AB'
      },
      currentTab: 0,
      tabList: [{name: '日报', id: '1'}, {name: '周报', id: '2'}, {name: '月报', id: '3'}],
      amountTypeMap: {TotalPayPrice: '实收金额', RefundPrice: '实退金额', amountPrice: '合计金额'},
      orderInfo: {},
      selButton: 0,
      selButtonColumn: 0,
      chartOpts: {
        legend: {
          show: false,
        },
        xAxis: {
          disabled: true
        },
        extra: {
          bar: {
            categoryGap: 3
          }
        }
      },
      chartOptsColumn: {
        color: ['#42B4AB'],
        legend: {
          show: false,
        },
        yAxis: {
          disabled: true
        },
      },
      colors: ['#B3C25A', '#71C78C', '#86BA71', '#FEB041', '#FD7E55', '#EECB3C', '#FEA147', '#FFC936', '#FD7F55'],
      chartData: {},
      chartDataColumn: {
        categories: ["钢琴", "小提琴", "尤克里里", "吉他", "架子鼓", "琵琶", "手风琴", "电子琴", "古筝"],
        series: [{
          name: "目标值",
          data: [
            {value: 30, color: '#B3C25A'},
            {value: 100, color: '#71C78C'},
            {value: 80, color: '#86BA71'},
            {value: 30, color: '#FEB041'},
            {value: 20, color: '#FD7E55'},
            {value: 60, color: '#EECB3C'},
            {value: 80, color: '#FEA147'},
            {value: 50, color: '#FFC936'},
            {value: 34, color: '#FD7F55'}
          ]
        }]
      },
      currentDay: '2021-11-12'
    }
  },
  computed: {
    amountTypeList() {
      let amountTypeMap = this.amountTypeMap, sKeyList = Object.keys(amountTypeMap), orderInfo = this.orderInfo
      sKeyList = sKeyList.map(key => {
        return {label: amountTypeMap[key], value: orderInfo[key] ? orderInfo[key] : '0.00'}
      })
      return sKeyList
    }
  },
  onLoad() {
    this.getOrderList()
  },
  methods: {
    getDate(val) {
      this.currentDay = val
    },
    change(index) {
      this.currentTab = index;
    },
    changeButton(index) {
      this.selButton = index
      if (index === 0) this.chartData = this.orderInfo.totalChartData
      if (index === 1) this.chartData = this.orderInfo.refundChartData
      if (index === 2) this.chartData = this.orderInfo.amountChartData
      console.log(this.chartData)
      this.$forceUpdate()
    },
    changeButtonColumn(index) {
      this.selButtonColumn = index
      if (index === 0) this.chartDataColumn = this.orderInfo.totalChartData1
      if (index === 1) this.chartDataColumn = this.orderInfo.refundChartData1
      if (index === 2) this.chartDataColumn = this.orderInfo.amountChartData1
      console.log(this.chartDataColumn)
      this.$forceUpdate()
    },
    getOrderList() {
      let type = 1, date = dayjs().format('YYYY-MM-DD')
      engine.getOrderList({type, date}).then(res => {
        let {TotalPayPrice, RefundPrice, amountPrice, subjectData} = res.data,
            {category, TotalData, RefundData, AmountData} = subjectData,
            totalList = TotalData.map((data, index) => {
              return {value: data, color: this.colors[index % this.colors.length]}
            }),
            refundList = RefundData.map((data, index) => {
              return {value: data, color: this.colors[index % this.colors.length]}
            }),
            amountList = AmountData.map((data, index) => {
              return {value: data, color: this.colors[index % this.colors.length]}
            })
        this.orderInfo = {TotalPayPrice, RefundPrice, amountPrice}
        this.orderInfo.totalChartData = {categories: category, series: [{name: '目标值', data: totalList}]}
        this.orderInfo.refundChartData = {categories: category, series: [{name: '目标值', data: refundList}]}
        this.orderInfo.amountChartData = {categories: category, series: [{name: '目标值', data: amountList}]}
        this.orderInfo.totalChartData1 = {categories: category, series: [{name: '目标值', data: TotalData}]}
        this.orderInfo.refundChartData1 = {categories: category, series: [{name: '目标值', data: RefundData}]}
        this.orderInfo.amountChartData1 = {categories: category, series: [{name: '目标值', data: AmountData}]}
        this.chartData = this.orderInfo.totalChartData
        this.chartDataColumn = this.orderInfo.totalChartData1
      })
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.tab-list-layout {
  width: 100%;
  border-bottom: 1px solid #F2F2F2;
}

.amount-layout {
  width: 100%;
  height: 127px;
  background: #FFFFFF;
}

.amount-item {
  flex: 1;
}

.divider-line {
  width: 100%;
  height: 14px;
  background: #EFEFEF;
}

.amount-item-num > * {
  font-size: 21px;
  line-height: 21px;
  color: #42B4AB;
  font-family: Microsoft YaHei;
}

.amount-item-num-unit {
  font-size: 12px;
}

.amount-item-text {
  margin-top: 6px;
  font-size: 14px;
  color: #333333;
}

.major-statistics-layout {
  width: 100%;
  background: white;
  padding-bottom: 32px;
}

.statistics-layout-title {
  padding-left: 12px;
  width: 100%;
  height: 37px;
  line-height: 37px;
  border-bottom: 1px solid #E4E4E4;
  /**/
  font-size: 14px;
  color: #333333;
}

.statistics-charts {
  margin: auto;
  margin-top: 38px;
  width: calc(100% - 30px * 2);
  height: 207px;
}

.tab-buttons {
  margin: auto;
  margin-top: 40px;
  width: fit-content;
}

.tab-buttons > * {
  width: 75px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  /*  */
  font-size: 12px;
  color: #42B4AB;
  background: white;
}

.tab-buttons > .selected {
  color: #FFFFFF;
  background: #42B4AB;
}

.button-left {
  border: 1px solid #42B4AB;
  border-radius: 3px 0px 0px 3px;
}

.button-center {
  border-top: 1px solid #42B4AB;
  border-bottom: 1px solid #42B4AB;
}

.button-right {
  border: 1px solid #42B4AB;
  border-radius: 0px 3px 3px 0px;
}

.statistics-month-title {
  width: 100%;
  height: 36px;
  background: #EFEFEF;
  text-align: center;
  line-height: 36px;
  /*  */
  font-size: 12px;
  color: #666666;
}

.month-statistics-layout {
  padding-bottom: 27px;
  width: 100%;
  background: white;
}

.month-statistics-title {
  margin-top: 19px;
  padding: 0px 13px;
}
</style>
